<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="stylesheet" href="/print/_css/recipe.css" />
    <title>中药处方打印</title>
  </head>
  <body>
    <div id="app">
      <div v-for="(item,index) in list" :key="index" class="significance-box">
        <div class="top-head">
          <div class="left">
            <img :src="hospital.logo" alt="" />
          </div>
          <div class="middle"> 
           中药处方{{ index > 0 ? index : "" }}
          </div>
          <div class="right">
            <div class="drug-type">中药</div>
          </div>
        </div>
        <div class="user-info">
          <div class="left">
            <table style="border:none;" width="100%">
              <tr>
                <td>病历号：{{ userInfo.cureCode }}</td>
                <td>科室：{{ userInfo.deptName }}</td>
                <td>费别：非医保</td>
              </tr>
              <tr>
                <td>姓名：{{ userInfo.patientName }}</td>
                <td>性别：{{ userInfo.sex }}</td>
                <td>年龄：{{ userInfo.age }}岁</td>
              </tr>
              <!-- <tr>
                <td colspan="2">地址：skdgjdlksgjsaldkfjl</td>
                <td colspan="2">皮试结果：暂无不良反应</td>
              </tr> -->
            </table>
          </div>
          <div class="right">
            <img
              class="img-erweima"
              width="100%"
              height="100%"
              :src="barCode"
              alt=""
            />
          </div>
        </div>
        <div class="nr-box">
          <div class="nr-left">
            <div class="nr-zhenduan">
              <div>临床(初步)诊断：</div>
              <div style="margin-top:2mm;">{{ zd }}</div>
            </div>
            <div class="nr-guomishi">
              <div>过敏史：</div>
              <div style="margin-top:2mm;">{{ gms }}</div>
            </div>
          </div>
          <div class="nr-right">
            <div class="rp-box">Rp</div>
            <div class="nr-table">
              <div style="display: flex;">
                <div
                  v-for="(item2,index2) in item.drug"
                  :key="index2"
                  style="text-align: center;flex-shrink: 0;width:25%;"
                >
                  {{ item2.drugName }}{{ item2.totalDisplay }}
                </div>
              </div>
            </div>
            <table width="100%" style="border: none">
              <tr>
                <td style="font-size:4mm;">医生签名：</td>
                <td style="text-align: right;">
                  开单时间：{{item.openOrderTime }}
                </td>
              </tr>
            </table>
          </div>
        </div>
        <table width="100%" style="margin-top:2mm;border: none;">
          <tr>
            <td>药品总价：{{ sellMoney(item) }}元</td>
            <td>药师审核：</td>
            <td>配药药师：</td>
            <td>核对发药：</td>
          </tr>
        </table>

        <div class="bottom">
          注：请勿遗失，处方只有当日有效，请妥善保管，报销时作核对凭证（非打印无效）
        </div>
      </div>
    </div>
    <!-- built files will be auto injected -->
    <script src="https://lib.baomitu.com/vue/2.6.10/vue.min.js"></script>
    <script>
      new Vue({
        data: {
          list: [],
          hospital: {
            logo: "",
            name: ""
          },
          zd: "",
          userInfo: {},
          gms: "",
          barCode: "",
          pageSize: 6 //每页打印数量
        },
        mounted() {
          var th = this;
          window.addEventListener(
            "message",
            function(event) {
              var obj = event.data;
              th.hospital = obj.hospital;
              th.zd = obj.firstVisit;
              th.userInfo = obj.basePrintVO;
              th.gms = obj.allergy;
              th.barCode = obj.barCode;
              th.list = obj.drug;
              th.$nextTick(function() {
                th.isLoadImg();
              });
            },
            false
          );
        },
        methods: {
          isLoadImg() {
            //这里要判断图片是否加载完成
            var imgs = document.getElementsByTagName("img");
            var timer = setInterval(() => {
              var i = 0;
              for (var index = 0; index < imgs.length; index++) {
                var element = imgs[index];
                if (element.complete) {
                  i++;
                }
              }
              if (i == imgs.length) {
                clearInterval(timer);
                window.print();
              }
            }, 500);
          },
          //计算总额：
          sellMoney(obj) {
            var result = 0;
            obj.drug.forEach(element => {
              result += Number.parseFloat(element.priceDisplay);
            });
            return result;
          }
        },
        watch: {},
        filters: {}
      }).$mount("#app");
    </script>
  </body>
</html>
